/*
 * 活动视图
 * @Author: zfx
 * @Date: 2018-07-23 16:00:07
 */
 <style lang="less" rel="stylesheet/less" type="text/less" scoped>
    .v-admin-activity-views {
		padding: 20px;
	}
	@deep: ~">>>";
	@{deep} .ivu-modal-body {
		min-height: 380px;
	}
 </style>
<template>
	<div class="v-admin-activity-views">
		<Tabs
			type="card"
			@on-click="changeTab">

			<TabPane
				v-model="tag_name"
				:label="$t('common.create')"
				name="新增">
				<activity-create
					ref="create"
					@post="postData"/>
			</TabPane>

			<TabPane
				:label="$t('common.check')"
				name="查看">
				<activity-index
					:loading="table_loading"
					:activity-list="activitys.data"
					@edit="activityDetail"
					@delete="deleteActivity"/>

				<br>
				<!-- 分页组件 -->
				<Row
					type="flex"
					justify="center">
					<Page
						:total="activitys.total"
						:current="activitys.current_page"
						:page-size="query_info.per_page"
						placement="top"
						show-sizer
						show-total
						@on-change="pageChange"
						@on-page-size-change="perPageChange"/>
				</Row>
			</TabPane>
		</Tabs>

		<Modal
			v-model="show_modal"
			:title="$t('activity.edit_activity_info')"
			class-name="vertical-middle-modal"
			@on-cancel="closeModal">
			<!-- 活动编辑组件 -->
			<activity-edit
				v-if="show_modal"
				ref="edit"
				:activity-detail="activity_detail"
				@update="updateActivity"/>

			<div slot="footer"/>
		</Modal>
	</div>
</template>

<script>

import qs from 'qs';
import { mapMutations } from 'vuex';
import API_LIST from 'src/API_LIST';
import activityCreate from './create';
import activityIndex from './index';
import activityEdit from './edit';

export default {
	name: 'AdminActivityViews',
	components: {
		activityCreate,
		activityIndex,
		activityEdit,
	},
	data() {
		return {
			query_info: {
				page: 1,
				per_page: 20,
			},

			search_info: {
				page: 1,
				per_page: 20,
			}, // 分页信息

			tag_name: '新增',
			table_loading: false, // 表格更新时的loading
			show_modal: false, // 弹框的控制
			activitys: [], // 活动列表
			activity_detail: {}, // 活动详情
		};
	},

	methods: {

		...mapMutations('spinShow', [
			'showSpin',
			'closeSpin',
		]),

		/**
         * 切换tab
         * @param  {string} tab_name {tab的name}
         * @return {undefined}
         */
		changeTab(tab_name) {
			if (tab_name === '查看') {
				this.fetchActivityList(this.query_info);

				this.$refs.create.handleReset('formValidate');
			} else {
				this.activitys.data = [];
			}
		},

		/**
         * 页码改变
         * @param  {string} pageNumber {当前页码}
         * @return {undefined}
         */
		pageChange(pageNumber) {
			this.search_info.page = pageNumber;

			this.search_info.per_page = this.query_info.per_page;

			this.fetchActivityList(this.search_info);
		},

		/**
         * 每页显示数改变
         * @param  {string} per_page {当前每页显示数}
         * @return {undefined}
         */
		perPageChange(per_page) {
			this.search_info.per_page = per_page;

			this.query_info.per_page = per_page;

			this.fetchActivityList(this.query_info);
		},

		/**
		 *新增活动post数据
		 *@param {Object} param {新增的对象}
		 *@return {undefined}
		 */
		postData(param) {
			this.showSpin(this.$t('common.please_wait'));
			this.$http.post(API_LIST.ADMIN_ACTIVITY, param)
				.then(({ data }) => {
					if (parseInt(data.code, 10) !== 0) throw new Error(data.error);
					this.$Message.success(this.$t('common.create_success'));
					this.$refs.create.handleReset('formValidate');
				})
				.catch((err) => {
					this.$Message.error(err.message);
				})
				.then(this.closeSpin);
		},

		/**
		 *获取活动列表
		 *@param {Object} param {列表参数}
		 *@return {undefined}
		 */
		fetchActivityList(param) {
			this.table_loading = true;
			const query_str = qs.stringify(param);
			this.$http.get(`${API_LIST.ADMIN_ACTIVITY}?${query_str}`)
				.then(({ data }) => {
					if (parseInt(data.code, 10) !== 0) throw Error(data.error);
					this.activitys = data.activities;
				})
				.catch((err) => {
					this.$Message.error(err.message || err.statusText);
				})
				.then(() => {
					this.table_loading = false;
				});
		},

		/**
		 * 关闭模态框
		 * @return {undefined}
		 */
		closeModal() {
			this.activity_detail = {};
		},

		/**
		 *查看活动列表详情
		 *@param {String} detail {活动详情对象}
		 *@return {undefined}
		 */
		activityDetail(detail) {
			this.activity_detail = detail;
			this.show_modal = true;
		},

		/**
		 * 删除活动
		 * @param {string} id {需要删除活动的id}
		 * @return {undefined}
		 */
		deleteActivity(id) {
			this.$Modal.confirm({
				title: this.$t('activity.reminder_statement'),

				onOk: () => {
					const param = {
						_method: 'DELETE',
					};
					this.table_loading = true;
					this.$http.post(`${API_LIST.ADMIN_ACTIVITY}/${id}`, param)
						.then(({ data }) => {
							if (parseInt(data.code, 10) !== 0) throw new Error(data.error);

							this.fetchActivityList(this.search_info);
							this.$Message.success(this.$t('common.delete_success'));
						})
						.catch((err) => {
							this.$Message.error(err.message || err.statusText);
						})
						.then(() => { this.table_loading = false; });
				},

				onCancel: () => {},
			});
		},

		/**
		 * 更新活动信息
		 * @param {Object} param {需要更新的对象}
		 * @return {undefined}
		 */
		updateActivity(id, param) {
			this.showSpin();

			this.$http.post(`${API_LIST.ADMIN_ACTIVITY}/${id}`, param)
				.then(({ data }) => {
					if (parseInt(data.code, 10) !== 0) throw new Error(data.error);
					this.$Message.success(this.$t('common.update_success'));
					this.show_modal = false;
					this.fetchActivityList(this.search_info);
				})
				.catch((err) => {
					this.$Message.error(err.message || err.statusText);
				})
				.then(this.closeSpin);
		},
	},

};
</script>
